﻿<script type="text/template" id="device-list-item-template">
    <!--
      DeviceHive Admin Console templates

      Copyright (C) 2016 DataArt

      Licensed under the Apache License, Version 2.0 (the "License");
      you may not use this file except in compliance with the License.
      You may obtain a copy of the License at

          http://www.apache.org/licenses/LICENSE-2.0

      Unless required by applicable law or agreed to in writing, software
      distributed under the License is distributed on an "AS IS" BASIS,
      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
      See the License for the specific language governing permissions and
      limitations under the License.

    -->
    <td class="name">
        <span class="current-value"><%= name %></span>
        <span class="new-value">
        <input type="text" class="new-device-name" maxlength="128" value="<%= name %>" data-toggle="tooltip"
               title="Device name can not be blank or exceed 128 characters"/></span>
    </td>

    <td class="network">
        <span class="current-value"><%= network.name %></span>
        <% if (networks.length > 0) {%>
        <span class="new-value">
            <select class="new-device-network">
                <% _.each(networks,function(net){
                    if(net.id == network.id){ %>
                <option value="<%= net.id %>" selected="selected"> <%= net.name %> </option>
                <%}else{ %>
                        <option value="<%= net.id %>"> <%= net.name %> </option>
                <%}}); %>
            </select>
        </span>
        <%} else {%>
        <span class="new-value"><%= network.name %></span>
        <%}%>
    </td>

    <td class="device-type">
        <span class="current-value"><%= deviceType.name %></span>
        <% if (deviceTypes.length > 0) {%>
        <span class="new-value">
            <select class="new-device-device-type">
                <% _.each(deviceTypes,function(typ){
                    if(typ.id == deviceType.id){ %>
                <option value="<%= typ.id %>" selected="selected"> <%= typ.name %> </option>
                <%}else{ %>
                        <option value="<%= typ.id %>"> <%= typ.name %> </option>
                <%}}); %>
            </select>
        </span>
        <%} else {%>
        <span class="new-value"><%= deviceType.name %></span>
        <%}%>
    </td>

    <td class="isBlocked lg-only">
        <span class="current-value"><%= (isBlocked) ? "Blocked" : "Normal" %></span>
        <select class="new-value form-control new-isBlocked-state" name="isBlocked">
            <option value="false">Normal</option>
            <% if (!isBlocked) { %>
            <option value="true">Blocked</option>
            <% } else { %>
            <option value="true" selected="selected">Blocked</option>
            <% } %>
        </select>
    </td>

    <td class="data lg-only device-data">
        <span class="current-value"><%= data %></span>
        <span class="new-value"><textarea class="new-device-data" data-toggle="tooltip"
                                          title="Device data should be valid Json or empty field"><%= data %></textarea></span>
    </td>

    <td class="buttons-column text-nowrap">
        <span class="current-value">
            <a href="javascript:void(0)" class="detail btn btn-sm btn btn-default">detail</a>
            <a href="javascript:void(0)" class="edit btn btn-sm btn-primary">edit</a>
            <a href="javascript:void(0)" class="delete btn btn-sm btn-danger">delete</a>
        </span>
        <span class="new-value">
            <button class="save btn btn-sm btn-success save-device">save</button>
            <button class="cancel btn btn-sm btn-warning">cancel</button>
        </span>
    </td>
</script>
